<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <h2>人员列表</h2>
    <input type="text" placeholder="输入用户名关键字" v-model="keyword">
    <ul>
      <li v-for="p in filterPersons" :key="p.id">
        {{p.name}}--{{p.age}}--{{p.gender}}
      </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        keyword: '', // 输入关键字
        persons: [ // 总人员数组
          { id: '001', name: '马冬梅', age: 21, gender: '女' },
          { id: '002', name: '周冬雨', age: 19, gender: '女' },
          { id: '003', name: '周杰伦', age: 20, gender: '男' },
          { id: '004', name: '帅邓伦', age: 22, gender: '男' },
        ]
      },

      computed: {
        // 用于显示的人员数组
        filterPersons () {
          // 取出依赖数据
          const {keyword, persons} = this
          // 计算产生结果
          const arr = persons.filter(p => p.name.includes(keyword))
          // 返回结果
          return arr
        }
      }
    })
  </script>
</body>
</html>